<template>
  <div class="page">
    <div class="page-left">
      <div class="menu-item">
        <img class="menu-icon" src="~/assets/img/menu-icon.png" alt="" />
        <span class="title">百宝工具箱</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
      <div class="fixed-menu-item">
        <el-icon style="font-size: 16px"><Ticket /></el-icon>
        <span class="title">购买/续费</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="page-right">
      <!-- <CommonTitle :line-color="'#32C7AA'">
        <template #title>
          <span style="margin-left: 10px;">热点指数</span>
        </template>
      </CommonTitle>
      <div class="hot-card">
        <div class="hot-card-item">
          <div class="hot-card-item-top">
            <img class="icon" src="~/assets/img/xhs.png" alt="" />
            <span>小红书·热点</span>
          </div>
          <div class="hot-card-item-content">
            <div class="hot-card-item-content-header">
              <div class="col1">排名</div>
              <div class="col2">热点事件</div>
              <div class="col3">热度值</div>
              <div class="col4">热度趋势</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/jinpai.png" alt="" />
              </div>
              <div class="col2">小红书出息了，真的上...</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/yinpai.png" alt="" />
              </div>
              <div class="col2">我的照片被清华用了一年</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/tongpai.png" alt="" />
              </div>
              <div class="col2">小狗簪花，马上漂亮</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
          </div>
        </div>
        <div class="hot-card-item">
          <div class="hot-card-item-top">
            <img class="icon" src="~/assets/img/xhs.png" alt="" />
            <span>小红书·热点</span>
          </div>
          <div class="hot-card-item-content">
            <div class="hot-card-item-content-header">
              <div class="col1">排名</div>
              <div class="col2">热点事件</div>
              <div class="col3">热度值</div>
              <div class="col4">热度趋势</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/jinpai.png" alt="" />
              </div>
              <div class="col2">小红书出息了，真的上...</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/yinpai.png" alt="" />
              </div>
              <div class="col2">我的照片被清华用了一年</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/tongpai.png" alt="" />
              </div>
              <div class="col2">小狗簪花，马上漂亮</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
          </div>
        </div>
        <div class="hot-card-item">
          <div class="hot-card-item-top">
            <img class="icon" src="~/assets/img/xhs.png" alt="" />
            <span>小红书·热点</span>
          </div>
          <div class="hot-card-item-content">
            <div class="hot-card-item-content-header">
              <div class="col1">排名</div>
              <div class="col2">热点事件</div>
              <div class="col3">热度值</div>
              <div class="col4">热度趋势</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/jinpai.png" alt="" />
              </div>
              <div class="col2">小红书出息了，真的上...</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/yinpai.png" alt="" />
              </div>
              <div class="col2">我的照片被清华用了一年</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
            <div class="hot-card-item-content-row">
              <div class="col1">
                <img src="~/assets/img/tongpai.png" alt="" />
              </div>
              <div class="col2">小狗簪花，马上漂亮</div>
              <div class="col3">1100.5w</div>
              <div class="col4">线</div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="navigation-tabs">
        <div class="p-right">
          <img class="liaotian" src="~/assets/img/liaotian.png" alt="" />
          <span class="text">电商交流群</span>
          <img class="r-jiantou" src="~/assets/img/r-jiantou.png" alt="" />
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="我的常用网站" name="first">
            <div class="small-tab">
              <div class="small-tab-item active">默认收藏</div>
              <div class="small-tab-item">日常永达</div>
              <div class="small-tab-item">长度最多10个字</div>
              <img
                @click="addClassificationFolderClick"
                class="small-tab-add"
                src="~/assets/img/small-tab-add.png"
                alt=""
              />
            </div>
            <div class="big-tab">
              <div class="big-tab-item">
                <img src="~/assets/img/aigc.png" alt="" />
                <span>AIGC频道</span>
              </div>
              <img
                @click="addCustomWebsiteClick"
                class="big-tab-add"
                src="~/assets/img/big-tab-add.png"
                alt=""
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="最近使用" name="second">Config</el-tab-pane>
        </el-tabs>
      </div>
      <div style="height: 20px"></div>
      <CommonTitle :line-color="'#32C7AA'">
        <template #title>
          <span style="margin-left: 10px;">热门推荐</span>
        </template>
      </CommonTitle>
      <div class="re-men-tui-jian-tab">
        <div class="re-men-tui-jian active">最新趋势</div>
        <div class="re-men-tui-jian">入站必看</div>
        <div class="re-men-tui-jian">设计入门</div>
        <div class="re-men-tui-jian">进阶提升</div>
        <div class="re-men-tui-jian">热门资源</div>
      </div>
      <div class="re-men-tui-jian-card">
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>

        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
      </div>
      <div style="height: 20px"></div>
      <CommonTitle :line-color="'#32C7AA'">
        <template #title>
          <span style="margin-left: 10px;">犀牛自学平台</span>
        </template>
        <template #subTitle>
          <div class="mrgx">
            <span>每日更新</span>
            <span>></span>
          </div>
        </template>
      </CommonTitle>
      <div class="xnzxpt-card">
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！
          </div>
        </div>
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            <span
              >Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！</span
            >
          </div>
        </div>
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！
          </div>
        </div>
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！
          </div>
        </div>
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！
          </div>
        </div>
        <div class="xnzxpt-card-item">
          <div class="img"></div>
          <div class="desc">
            <span class="tag">Hot</span>
            Midjourney Niji 6 重磅更新！ 风格全面升级，支持文本生成！
          </div>
        </div>
      </div>
      <div style="height: 20px"></div>
      <CommonTitle :line-color="'#32C7AA'">
        <template #title>
          <span style="margin-left: 10px;">设计教程</span>
        </template>
      </CommonTitle>
      <div class="re-men-tui-jian-card">
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>

        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
        <div class="re-men-tui-jian-card-item">
          <div class="top">
            <img src="~/assets/img/jiqiren.png" alt="" />
            <span>酷表ChatExcel</span>
          </div>
          <div class="desc">北大团队研发的通过聊天来操作表格的AI工具</div>
        </div>
      </div>
    </div>
  </div>
  <AddClassificationFolder ref="addClassificationFolder" />
  <AddCustomWebsite ref="addCustomWebsite" />
</template>

<script setup>
import { Ticket, ArrowRight } from "@element-plus/icons-vue";
const activeName = ref("first");
const addClassificationFolder = ref();
const addClassificationFolderClick = () => {
  addClassificationFolder.value?.show();
};
const addCustomWebsite = ref();
const addCustomWebsiteClick = () => {
  addCustomWebsite.value?.show();
};
</script>

<style lang="scss" scoped>
@import "./navigation.scss";
</style>
